import React, { Component, Fragment } from 'react'
import { CardWrap, ContentWrap } from './LoadinglStyle.js'
import { Card, Spin, Alert, Button } from 'antd'
class LoadingComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Loading组件',
      loading: false,
      loading2: false,
    }
    this.changeStage = this.changeStage.bind(this)
    this.changeStage2 = this.changeStage2.bind(this)
  }
  render() {
    return (
      <Fragment>
        <ContentWrap>
          <CardWrap>
            <Card title="Spin基础用法">
              <p>Loading加载主要是利用Spin组件</p>
              <p>1.Spin size控制大小</p>
              <p>2.Spin spinning控制显示还是不显示</p>
              <p>3.Spin delay标识延迟</p>
              <p>4.Spin 最外层包裹一个Alert层</p>
            </Card>
          </CardWrap>

          {/*Spin基础用法*/}
          <CardWrap>
            <Card title="Spin基础用法">
              <Spin size="small" style={{ marginRight: '20px' }}></Spin>
              <Spin size="middle" style={{ marginRight: '20px' }}></Spin>
              <Spin size="large" style={{ marginRight: '20px' }}></Spin>
            </Card>
          </CardWrap>
          {/*内容遮罩*/}
          <CardWrap>
            <Card title="内容遮罩">
              <Spin size="small" style={{ marginRight: '20px' }}></Spin>
              <Spin size="middle" style={{ marginRight: '20px' }}></Spin>
              <Spin size="large" style={{ marginRight: '20px' }}></Spin>
            </Card>
          </CardWrap>
          {/*内容遮罩文字*/}
          <CardWrap>
            <Card title="内容遮罩文字">
              <Spin tip="Loading...">
                <Alert
                  message="提示title"
                  description="描述文字描述文字2"
                  type="info"
                />
              </Spin>
            </Card>
          </CardWrap>
          {/* 点击加载内容遮罩文字*/}
          <CardWrap>
            <Card title="内容遮罩文字">
              <Button
                type="primary"
                onClick={this.changeStage}
                style={{ marginBottom: '20px' }}
              >
                点击变化
              </Button>
              <Spin tip="Loading..." spinning={this.state.loading}>
                <Alert
                  message="提示title"
                  description="描述文字描述文字2"
                  type="info"
                />
              </Spin>
            </Card>
          </CardWrap>
          {/*延迟加载loading*/}
          <CardWrap>
            <Card title="延迟加载内容遮罩文字">
              <Button
                type="primary"
                onClick={this.changeStage2}
                style={{ marginBottom: '20px' }}
              >
                点击变化
              </Button>
              <Spin delay={500} tip="Loading..." spinning={this.state.loading2}>
                <Alert
                  message="提示title"
                  description="描述文字描述文字2"
                  type="info"
                />
              </Spin>
            </Card>
          </CardWrap>
        </ContentWrap>
      </Fragment>
    )
  }
  changeStage() {
    let value = this.state.loading
    this.setState({
      loading: !value,
    })
  }
  changeStage2() {
    let value = this.state.loading2
    this.setState({
      loading2: !value,
    })
  }
}

export default LoadingComponent
